<template>
	<div class="echarts-box" style="width: 100%; height: 100%">
		<Echart :options="options" id="line2Chart"></Echart>
	</div>
</template>

<script>
import { graphic } from "echarts";

export default {
	data() {
		return {
			options: {},
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.options = {
				legend: {
					textStyle: {
						fontSize: 12,
						color: "#6A93B9",
					},
					data: ["expected", "actual"],
				},
				grid: {
					left: "2%",
					right: "2%",
					bottom: "5%",
					top: "30px",
					containLabel: true,
				},
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(0,0,0,.6)",
					borderColor: "rgba(147, 235, 248, .8)",
					textStyle: {
						color: "#FFF",
					},
					axisPointer: {
						type: "cross",
					},
					padding: [5, 10],
				},
				xAxis: {
					data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
					boundaryGap: false, //坐标轴两边留白

					axisLabel: {
						color: "#ddd",
						fontSize: 12,
					},
					axisTick: {
						show: false,
					},
				},
				yAxis: {
					nameTextStyle: {
						fontSize: 12,
						color: "#ddd",
						// align: "center",
					},
					splitLine: {
						lineStyle: {
							color: "rgba(255, 255, 255, 0.15)",
							type: "dashed", // dotted 虚线
						},
					},
					splitArea: { show: false },
					axisLine: { show: false },
					axisTick: { show: false },
					axisLabel: {
						fontSize: 12,
						fontFamily: "Bebas",
						color: "#ddd",
					},
				},
				series: [
					{
						name: "expected",
						smooth: true,
						type: "line",
						itemStyle: {
							color: "#5090FF",
							lineStyle: {
								color: "#5090FF",
								width: 2,
							},
						},
						data: [1000, 4000, 5000, 6000, 3000, 8000, 7000],
						animationDuration: 1000,
						animationEasing: "cubicInOut",
					},
					{
						name: "actual",
						smooth: true,
						type: "line",
						itemStyle: {
							color: "#01B3E4",
							lineStyle: {
								color: "#01B3E4",
								width: 2,
							},
						},
						data: [4000, 6000, 7000, 2000, 5000, 7000, 9000],
						animationDuration: 1000,
						animationEasing: "quadraticOut",
					},
				],
			};
		},
	},
};
</script>

<style lang="scss" scoped></style>
